<template>
	<div>
		<canvas width="200" height="200" id="canvas"	ref="canvas"></canvas>
	</div>
</template>
<script type="text/javascript">
	import { Game, GameObject, resource, RESOURCE_TYPE, LOAD_EVENT } from '@eva/eva.js'
	import { RendererSystem } from '@eva/plugin-renderer';
	import { Sound, SoundSystem } from '@eva/plugin-sound';
	export default{
		name: 'EvajsTestSound',
		data(){
			return {
				percent: 0,
				game: null
			}
		},
		created(){
			this.$nextTick(()=>{
				this.loadResource()
			})
		},
		destroyed(){
			if(this.game){
				this.game.destroy()
			}
		},
		methods:{
			loadResource(){
				resource.addResource([
					{
						name: 'bgSound',
						type: RESOURCE_TYPE.AUDIO,
						src: {
							audio: {
								type: 'audio',
								url: '/audio/duckBg.mp3',
							},
						},
						preload: true,
					},
					{
						name: 'successSound',
						src: {
							audio: {
								type: 'audio',
								url:
									'/audio/success.mp3',
							},
						},
						preload: true,
					},
				]);

				resource.preload();
				// 开始loader
				resource.on(LOAD_EVENT.START, e => {
					console.log('开始加载', e);
				}); 
				// 加载进度更新
				resource.on(LOAD_EVENT.PROGRESS, e => {
					console.log('进度监听', e);
				}); 
				// 某文件加载成功
				resource.on(LOAD_EVENT.LOADED, e => {
					console.log('某文件加载成功', e);
				}); 
				// 加载进度更新
				resource.on(LOAD_EVENT.COMPLETE, e => {
					console.log('完成', e);
					this.testSound()
				}); 
				// 加载错误
				resource.on(LOAD_EVENT.ERROR, e => {
					console.log('错误', e);
				}); 
			},
			testSound(){
				this.game = new Game({
					systems: [
						new RendererSystem({
							canvas: this.$refs.canvas,
							width: 750,
							height: 1000,
						}),
						new SoundSystem()
					],
					autoStart: true,
					frameRate: 60,
				});

				const bgSoundObj = new GameObject('sound');
				const bgSound = bgSoundObj.addComponent(
					new Sound({ resource: 'bgSound', loop: true, autoplay: true, volume: 0.5 })
				);

				bgSound.play();
			}
		}
	}
</script>